import './AdminHtmlTemp.scss'

import dayjs from 'dayjs'
import { Skeleton } from 'antd'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { lazy, Suspense, useState } from 'react'


const AdminHtmlTemp = ({ url, title }) => {
    AdminHtmlTemp.propTypes = {
        url: PropTypes.string,
        title: PropTypes.string,
    }

    const [TablePages, setTablePages] = useState()
    const [TableStatus, setTableStatus] = useState(true)

    useMount(() => {
        const Data = lazy(() => import(`../Router/Custom/${url}.jsx`))
        setTablePages(Data)
        setTableStatus(false)
        console.log(`%c[${dayjs().format('YYYY-MM-DD HH:mm:ss')}] Htm -- ${title}:${url}`, 'color: #f759ab; font-size: 14px;')
    })

    return (
        <div className="AdminHtmlTemp">
            <Suspense>
                <Skeleton loading={TableStatus} active paragraph={{ rows: 16 }}>
                    {TablePages && <TablePages />}
                </Skeleton>
            </Suspense>
        </div>
    );
};

export default AdminHtmlTemp;